<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>联动下拉框</title>
    <style>
        select {
            width: 128px;
        }
    </style>
	<script type="text/javascript" src="../jquery-1.10.2.js">
	</script>
	<script type="text/javascript" src="../src/jquery.parser.js">
	</script>
	<script type="text/javascript" src="../src/jquery.linkage.js">
	</script>


    <script type="text/javascript" src="file:///D|/workspace/project/xui/src/jquery.linkage.js"></script>
</head>

<body>
    <select id="s1" name="" size="1" data-options="next:'#s2'">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <select id="s2" name="" data-options="next:'#s3'">
        <option value="11">11</option>
    </select>
    <select id="s3" name="">
        <option value="111">111</option>
    </select>
    <script>
        /*
        function loadData(target, data) {
            var t = $(target);
            var parents = data.parents;
            var length = data.length;
            var first = t.attr('data-first-option');
            var str = '';
            if (first) {
                str += '<option value="">' + first + '</option>';
            }
            for (var i = 0; i < length; i++) {
                var jq = parents[i];
                str += '<option value="' + jq.val() + '">' + jq.val() + '</option>';
            }
            t.html(str);
        }

        function test(target) {

            var t = $(target);
            //change事件

            var parents = [];
            var length = 0;

            while (t.length > 0) {
                parents.push(t);
                length++;
                t.change({
                    parents: parents,
                    length: length
                }, change);
                t = $(t.attr('data-next'));
            }

            function change(e) {
                var next = $(this).attr('data-next');
                //加载next
                loadData(next, e.data);

                //清空
                while (next) {
                    next = $(next).attr('data-next');
                    $(next).html('');
                }
            }
        }
        test('#s1');
        */
        var data = ['1'];
        $(function () {
            $('#s1').linkage({
                data: data,
                firstText: '请选择2',
                load: function (data, parents) {
                    return [{
                        id: '1',
                        text: '一'
                    }, {
                        id: '2',
                        text: '二'
                    }];
                }
            });
        });
    </script>
</body>

</html>
